<script setup lang="ts">
import { watchEffect, ref } from 'vue'
import Ring from './Ring.vue'
const props = defineProps(['data'])
const colorList = [
  '#10FB7F',
  '#00EEED',
  '#FBC610',
  '#F67106',
  '#D93C47',
  '#448ACA',
  '#f6b56a',
  '#2fe1ca',
  '#fe6b53'
]
const boxRef = ref()
const woWidth = ref()
watchEffect(() => {
  const boxWidth = boxRef.value?.offsetWidth
  woWidth.value = boxWidth / 12
})
</script>
<template>
  <div ref="boxRef" class="flex justify-between w-full mt-5 col col-1">
    <div class="flex-col items-center item" :style="{ width: `calc(100% / 12)` }">
      <p class="text-center label">Line</p>
      <p class="value" :style="{ color: colorList[2] }">
        <DynamicText text="Assy31" :containerWidth="woWidth" />
      </p>
    </div>
    <div class="flex-col items-center item" :style="{ width: `calc(100% / 12)` }">
      <p class="text-center label">Shift</p>
      <p class="value" :style="{ color: colorList[1] }">
        <DynamicText text="D" :containerWidth="woWidth" />
      </p>
    </div>
    <div class="flex-col items-center item" :style="{ width: `calc(100% / 6)` }">
      <p class="text-center label">HC</p>
      <p :style="{ color: colorList[2] }">
        <Ring :percentage="100" :clockwise="false" topNumber="71" bottomNumber="70" :size="150" startColor="#202442" endColor="#FF9800" />
      </p>
    </div>
    <div class="flex-col items-center item" :style="{ width: `calc(100% / 6)` }">
      <p class="text-center label">Ramp</p>
      <p :style="{ color: colorList[2] }">
        <Ring :percentage="100" :clockwise="false" topNumber="258" bottomNumber="277" :size="150" startColor="#202442" endColor="#15cf95" />
      </p>
    </div>
    <div class="flex-col items-center item" :style="{ width: `calc(100% / 6)` }">
      <p class="text-center label">FPY</p>
      <p :style="{ color: colorList[2] }">
        <Ring :percentage="95" :clockwise="false" topNumber="97.67%" bottomNumber="96.00%" :size="150" startColor="#202442" endColor="#FF9800" />
      </p>
    </div>
    <div class="flex-col items-center item" :style="{ width: `calc(100% / 6)` }">
      <p class="text-center label">Velocity</p>
      <p :style="{ color: colorList[2] }">
        <Ring :percentage="20" :clockwise="false" topNumber="0.39%" bottomNumber="0.30%" :size="150" startColor="#202442" endColor="#FF9800" />
      </p>
    </div>
  </div>
</template>
<style lang="less" scoped>
@import url('../../../style/reset.less');
.row-1 {
  .col {
    height: 210px;
    .item {
      .label {
        width: 100%;
        height: 50px;
        // color: #00f2f1;
        color: #fff;
        font-size: 32px;
        line-height: 52px;
      }
      .value {
        width: 100%;
        height: 90px;
        font-size: 46px;
        line-height: 90px;
      }
    }
  }
  .col-1 {
    width: 100%;
  }
}
</style>
